// 审批&消息
.box-style{
  background-color: #fff;
  box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
  border-radius: 10px;
}
.approve-msg{
  @include flex;
  @extend .box-style;
  flex: 1;
  &__options{
    width: 150px;
    flex-shrink: 0;
    border-right: 1px solid rgba(194,212,232,0.5);
    &__tabs{
      padding-top: 16px;
      .tabs-item{
        @include flex-inline-flex;
        position: relative;
        width: 75px;
        height: 32px;
        border-bottom: 1px solid rgba(194,212,232,0.5);
        background-color: #fff;
        font-size: 14px;
        cursor: pointer;
      }
      .tabs-item--active{
        color: #409EFF;
        &::after{
          content: "";
          position: absolute;
          left: 0;
          bottom:0;
          width: 100%;
          height: 2px;
          background-color: #409EFF;

        }
      }
      :deep(.arco-badge-number){
        box-shadow: none;
        right:-9px ;
        top: -6px;
      }
    }
    &__buttons{
      @include flex-column;
      align-items: center;
      .button-item{
        @include flex-inline-flex;
        width: 114px;
        height: 25px;
        margin-top: 27px;
        background-color: #F5F7FA;
        border-radius: 32px;
        font-size: 12px;
        color: #767676;
        line-height: 17px;
        cursor: pointer;
      }
      .button-item--active{
        color: #fff;
        background-color: #007DFF;
      }
    }
  }
}




.home {
  @include flex;
  height: calc(100% - 40px);
}

.home-left {
  @include flex;
  flex-direction: column;
  flex: 1;
  margin-right: 20px;

  &_info {
    @include flex;
    margin-bottom: 20px;
  }

  &_user {
    @include flex-center;
    flex-direction: column;
    width: 283px;
    padding: 26px 0;
    margin-right: 20px;
    background: url("@/assets/images/home-avatar-bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;

    .user-avatar {
      @include flex-center;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #fff;
    }

    .user-name {
      margin: 20px auto 5px;
      font-weight: 700;
      font-size: 16px;
      color: #3D3D3D;
      line-height: 23px;
    }

    .user-dept {
      font-size: 14px;
      color: #767676;
      line-height: 20px;
    }
  }

  &_approve {
    @include flex;
    flex: 1;
    background: #fff;
    box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
    border-radius: 10px;
  }

  .approve-opt {
    padding-right: 20px;

    .title {
      padding-top: 4px;
    }

    .approve-state {
      @include flex;
      flex-direction: column;
      padding-right: 20px;
      margin-top: 20px;
      border-right: 1px solid #C2D4E8;

      div {
        @include flex-inline-flex;
        width: 95px;
        height: 28px;
        background-color: #F5F7FA;
        border-radius: 32px;
        cursor: pointer;

        &+div {
          margin-top: 32px;
        }
      }

      .approve-state_active {
        background: #007DFF;
        color: #fff;
      }
    }
  }

  .approve-list {
    flex: 1;

    &_header {
      @include flex-between;
      margin-bottom: 12px;
    }

    &_state {
      &-item {
        @include flex-between;
        align-items: center;
        padding: 4px 20px;
        box-sizing: border-box;
        background-color: #F5F7FA;
        border-radius: 4px;

        &+.approve-list_state-item {
          margin-top: 4px;
        }

        .item-content {
          .title {
            margin-bottom: 3px;
            font-size: 14px;
            color: #3D3D3D;
            line-height: 20px;
          }

          .info {
            font-size: 12px;
            color: #989EA8;
            line-height: 17px;
          }
        }
      }
    }
  }

}

:deep(.arco-pagination) {
  margin-top: 20px;
  justify-content: end;
}

// 任务排期
.task-scheduling {
  @include flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 288px;
  width: 388px;
  background-color: #fff;
  box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
  border-radius: 10px;

}

// 自定义tabs
// todo:可封装
::v-deep(.custom-tabs) {
  @include flex-align;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 20px;

  div:nth-child(1)~div {
    margin-left: -1px;
  }

  div {
    @include flex-inline-flex;
    width: 92px;
    height: 30px;
    background: #fff;
    border: 1px solid #DCDCDC;
    cursor: pointer;
  }

  .custom-tabs_item-active {
    border: 1px solid #007DFF;
    color: #007DFF;
    position: relative;
    z-index: 2;
  }
}

// 自定义弹窗
// todo:可封装
.modal-fixed {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

.custom-modal {
  &-mask {
    @extend .modal-fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }

  &-body {
    @extend .modal-fixed;
    width: 400px;
    //height: 300px;
    background: linear-gradient(180deg, #d9e8ff 0%, #ffffff 100%);
    box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.5);
    border-radius: 10px 10px 10px 10px;
  }
}

// 到期充值
.recharge-container {
  @include flex-center;
  flex-direction: column;
  padding-bottom: 45px;
}

.recharge-icon {
  margin-top: 10px;
}

.tip-content {
  width: 290px;
  margin: 20px auto 30px;
  font-size: 14px;
  color: #3d3d3d;
  line-height: 20px;
  text-align: center;
}

// 首次修改密码
.set-password {
  padding: 20px 30px;
  box-sizing: border-box;

  &_icon {
    @include flex-center;
    flex-direction: column;
    margin-bottom: 30px;
  }

  &_tip {
    font-size: 18px;
    color: #213270;
    line-height: 25px;
  }

  &_form-tip {
    margin: 10px 0 40px;
    font-size: 14px;
    color: #86909C;
    line-height: 20px;
  }

  .login-btn {
    width: 100%;
    height: 55px;
    background-color: #007dff;
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
    line-height: 26px;
  }

  :deep(.arco-form-item-content-wrapper) {
    height: 55px;
    padding: 16px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #b2d6ff;
    font-weight: 400;
    font-size: 18px;
    color: rgba(4, 19, 74, 0.2);
    line-height: 24px;
  }

  :deep(.arco-input-wrapper) {
    border: 0;
  }

  :deep(.arco-input) {
    font-size: 18px;
    color: #333;
  }

  :deep(.arco-icon-hover) {
    font-size: 24px;
  }
}

// 修改成功
.set-password_success {
  padding: 20px 30px;
  box-sizing: border-box;

  &-icon {
    @include flex-center;
    flex-direction: column;
  }

  &-tip {
    margin-top: 35px;
    font-size: 24px;
    color: #213270;
    line-height: 34px;
  }
}

// 审批列表
.examine-list {
  font-size: 14px;
  line-height: 22px;

  .examine-state {
    &_label {
      display: inline-block;
      padding: 2px 8px;
      box-sizing: border-box;
      border-radius: 3px;
      font-size: 12px;
      line-height: 20px;
    }

    &_pending {
      color: #E37318;
      background-color: #FFF1E9;
    }

    &_approved {
      color: #007DFF;
      background-color: #E0EAFF;
    }
  }

  .examine-content {
    color: #3D3D3D;
  }

  .pending-state {
    color: rgba(0, 0, 0, 0.9);
  }

  .approved-state {
    color: #86909C;
  }
}

:deep(.arco-radio-group) {
  margin: 20px 0;
}

:deep(.arco-list-medium .arco-list-content-wrapper .arco-list-content > .arco-list-item) {
  padding: 13px 0;
}


// 办理
.handel-container {
  @include flex;
  height: 100%;
}

.instructions-content {
  width: 400px;
  height: 90vh;
  position: absolute;
  right: calc(900px + 30px);
  background: white;
  z-index: 1002;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;

  .triangle {
    position: absolute;
    right: -26px;
    top: 10px;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-left: 14px solid white;
  }
}

::v-deep(.arco-picker) {
  background: #F2F3F5;
}

.tip {
  margin-top: 8px;
  font-size: 12px;
  color: #86909C;
}
